import React, {PropsWithChildren, useCallback, useEffect, useState} from 'react'
import {Text} from "@tarojs/components";
import styles from "./procurementReturn.module.sass"
import {Pageable} from "../utils/Page";
import Taro from "@tarojs/taro";
import procurementPageStackStore from "../store/ProcurementPageStackStore";
import MyNavigationBar from "../components/MyNavigationBar";
import {procurementReturnStatusMap, queryProcurementReturns} from "../apis/ProcurementReturnApi";
import {Cell, Space, VirtualList} from "@nutui/nutui-react-taro";
import {QueryProcurementResponse} from "../apis/ProcurementApi";
import {YEAR_MONTH_DAY_FORMATER} from "../utils/Date";
import procurementReturnPageStackStore from "../store/ProcurementReturnPageStackStore";
import {observer} from "mobx-react";

export interface ProcurementReturnProps extends PropsWithChildren {

}

const ProcurementReturn: React.FC<ProcurementReturnProps> = ({}) => {
    const [loading, setLoading] = useState(false)
    const queryWithoutPageable = useCallback(async (pageable: Pageable) => {
        setLoading(true)
        Taro.showLoading()
        try {
            return await queryProcurementReturns({}, pageable)
        } finally {
            setLoading(false)
            Taro.hideLoading()
        }
    }, [])

    const query = useCallback(async () => {
        const response = await queryWithoutPageable(procurementPageStackStore.pageable)
        procurementReturnPageStackStore.appendItems(response.data)
    }, [queryWithoutPageable, ...procurementReturnPageStackStore.pageable.toDependencyList()])

    useEffect(() => {
        query()
    }, [query]);
    return <>
        <MyNavigationBar>采购退货</MyNavigationBar>
        <VirtualList
            itemEqual={false}
            onScroll={() => {
                if (!procurementReturnPageStackStore.last && !loading) {
                    procurementReturnPageStackStore.next()
                }
            }}
            list={procurementReturnPageStackStore.list}
            itemRender={(item: QueryProcurementResponse) => {
                return <Cell style={{margin: 0}} onClick={()=>{
                    Taro.navigateTo({
                        url:`/pages/procurementReturnDetail?id=${item.id}`
                    })
                }}>
                    <Space direction={"vertical"} style={{width:"100%"}}>
                        <Space justify={"between"}>
                            <Text
                                className={styles.title}>{item.supplier.name}采购退货单 {"     "}</Text>
                            <Text className={styles.extra}>{procurementReturnStatusMap[item.status]}</Text>
                        </Space>
                        {!!item.note&&
                            <Text className={styles.description}>{item.note}</Text>
                        }

                        <Space className={styles.description}>
                            <Text>{`${item.goodsKindAmount}个单品`}</Text>
                            <Text>{`${item.createdBy.name}创建于${item.createdDateTime
                                .toLocalDate()
                                .format(YEAR_MONTH_DAY_FORMATER)}`}</Text>
                        </Space>
                    </Space>
                </Cell>;
            }}/>


    </>
}

export default observer(ProcurementReturn)


